<template>
<el-container>
  <el-header>精选内容</el-header>
  <el-main>
    <el-card style="margin-top:1em" >
      <el-table
      v-if="articles.length"
        :data="articles"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="封面"
          width="180">
          <template>
            <!-- <span>{{ scope.row.cover.images[0] }}</span> -->
            <el-image>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="320">
        </el-table-column>
        <el-table-column
          prop="scope"
          label="文章内容"
          width="540">
        <template slot-scope="scope">
          <div v-html="scope.row.content"></div>
        </template>
        </el-table-column>
        <el-table-column
          prop="scope"
          label="发布时间">
        <template slot-scope="scope">
        <span >{{scope.row.data | formData }}</span>
        </template>
        </el-table-column>
                <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-star-off"
              circle
              @click="love(scope.$index, scope.row, num=1)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
               style="margin-top:10px;"
               background
               layout="prev, pager, next"
               @current-change="YpageChange"
               :page-size="10"
               :total="tolcount">
</el-pagination>
    </el-card>
  </el-main>
</el-container>
</template>
<script>
export default {
  name: 'ArticleList',
  data () {
    return {
      form: {
      },
      articles: [],
      tolcount: 1,
      curPage: 1
    }
  },
  created () {
    this.loadArticles()
  },
  methods: {
    loadArticles () {
      this.$http.get('http://localhost:3000/wen').then((response) => {
        console.log(666)
        console.log(response.data)
        this.articles = response.data
        // console.log(response.data.assets[0].username)
        // console.log(JSON.stringify(response.data))
      })
    },
    YpageChange (curPage) {
      this.curPage = curPage
      this.loadArticles()
    },
    love (index, row) {
      console.log(index, row)
      this.$confirm('你确定要加入精选吗?').then(() => {
        const data = {
          title: row.title,
          content: row.content,
          data: row.data
        }
        const assets = JSON.stringify(data)
        this.$http.post('http://localhost:3000/Jing', assets).then(res => {
          console.log('ok', res)
        }).catch(err => {
          console.log(err)
          this.$message.error('加入失败')
        })
      }).catch(() => {
      })
    }
  },
  filters: {
    formData (value) {
      const data = new Date(value)
      const y = data.getFullYear()
      const m = Number(data.getMonth() + 1) < 10 ? '0' + Number(data.getMonth() + 1) : Number(data.getMonth() + 1)
      const d = data.getDate() < 10 ? '0' + data.getDate() : data.getDate()
      const h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours()
      // const s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds()
      const mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes()
      return y + '_' + m + '-' + d + '_' + h + ':' + mm
    }
  }
}
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
    .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .filter-card {
  margin-bottom: 30px;
}

.list-table {
  margin-bottom: 20px;
}
  el-table-column{
          width: 100%;
      height: 30px;
            line-height: 30px;
  }
</style>
